<template>
    <div class="user">
        <van-nav-bar
        title="个人中心"
        left-arrow
        @click-left="onClickLeft"
        />
        <van-row class="user-top-bg">
            <van-col span="24">
                <van-row type="flex" justify="center" class="user-top-border">
                    <van-col span="22">
                        <div class="user-top-main">
                            <van-row style="line-height: 83px;">
                                <van-col span="14">
                                    <van-row>
                                        <van-col span="8"><img :src='logo' width="40" height="40" class="user-top-main-img" /></van-col>
                                        <van-col span="16"><span class="user-top-main-span">蒙娜丽莎的微笑</span></van-col>
                                    </van-row>
                                </van-col>
                                <van-col span="9">
                                    <div class="user-top-main-right">
                                        <!-- <van-icon name="arrow"  style="font-size:15px;color:#fff;" /> -->
                                    </div>
                                </van-col>
                            </van-row>
                        </div>
                    </van-col>
                </van-row>
            </van-col>
        </van-row>
        <van-row class="user-two-main">
            <van-col span="24">
                <van-row type="flex" justify="center">
                    <van-col span="22">
                        <div class="user-ad">
                            <img :src='ad' />
                        </div>
                    </van-col>
                </van-row>
                <van-row type="flex" justify="center">
                    <van-col span="18">
                        <van-grid :border="false" :column-num="3">
                            <van-grid-item>
                                <van-image :src="tubiao5" />
                                <span class="user-tubiao-title">我的钱包</span>
                            </van-grid-item>
                            <van-grid-item>
                                <van-image :src="tubiao6" />
                                <span class="user-tubiao-title">我的订单</span>
                            </van-grid-item>
                            <van-grid-item>
                                <van-image :src="tubiao7" />
                                <span class="user-tubiao-title">我的卡券</span>
                            </van-grid-item>
                            </van-grid>
                    </van-col>
                </van-row>
                <van-row type="flex" justify="center"class="top">
                    <van-col span="24">
                        <van-cell title="积分商城" :icon="tubiao1"  is-link />
                    </van-col>
                </van-row>
                <van-row type="flex" justify="center">
                    <van-col span="24">
                        <van-cell title="平台活动" :icon="tubiao2"  is-link />
                    </van-col>
                </van-row>
                <van-row type="flex" justify="center">
                    <van-col span="24">
                        <van-cell title="常见问题" :icon="tubiao3"  is-link />
                    </van-col>
                </van-row>
                <van-row type="flex" justify="center">
                    <van-col span="24">
                        <van-cell title="关于我们" :icon="tubiao4"  is-link />
                    </van-col>
                </van-row>
                 <van-row type="flex" justify="center" class="user-footer">
                    <van-col span="24">
                        <div class="user-footer-img">
                            <img :src="footer" alt="">
                        </div>
                    </van-col>
                </van-row>
            </van-col>
        </van-row>
    </div>
</template>
<script>
export default {
    data() {
        return {
            logo:require('../assets/img/logo.png'),
            ad:require('../assets/img/ad.png'),
            tubiao1:require('../assets/img/积分商城.png'),
            tubiao2:require('../assets/img/平台活动.png'),
            tubiao3:require('../assets/img/常见问题.png'),
            tubiao4:require('../assets/img/关于我们.png'),
            tubiao5:require('../assets/img/钱包.png'),
            tubiao6:require('../assets/img/订单.png'),
            tubiao7:require('../assets/img/卡券.png'),
            footer:require('../assets/img/分组.png'),
            right:require('../assets/img/right.png'),
        };
    },
    methods: {
    onClickLeft() {
      
    }
  }
}
</script>
<style scoped>
    /deep/ .van-nav-bar .van-icon {
        color: #212121;
        font-size:14px;
    }
    /deep/ .van-nav-bar__title {
        font-size: 19px;
        font-weight:bold;
        color: #000000;
    }
	.top{margin-top:9px}
/deep/ .van-cell{font-size: 15px;font-weight:bold;}
    .user{

    }
/deep/ .van-grid{padding-top: 20px;}	
    .user-top-bg{
        /* width: 375px; */
        height: 100px;
        background: linear-gradient(#6fb1ff, #1f7eed);
    }
    .user-top-border{
        line-height: 100px;
    }
    .user-top-main{
        text-align: center;
    }
    .user-top-main-img{
        border-radius: 50%;
        margin-top: 26px;
        margin-right:-18px;
    }
    .user-top-main-span{
        font-size: 15px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: center;
        color: #ffffff;
    }
    .user-top-main-right{
        float: right;
        width:15px;
        height:15px;
        margin-top: 35px;
        background:url("../assets/img/right.png") no-repeat;
    }
    .user-ad{
        text-align: center;
    }
    .user-ad>img{
        width:100%;
    }
    .user-two-main{
        height:622px;
        background: #ffffff;
        border-radius: 15px 15px 0px 0px;
        margin-top: -20px;
        /* position:absolute;
        top:10px;
        z-index:1; */
    }
    .user-tubiao-title{
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        color: #4a4a4a;
        padding-top:5px;
    }
    .user-footer{
        margin-top:221px;
    }
    .user-footer-img{
        text-align: center;
    }
</style>